<template>
    <div class="wrapFoo">
        <foo
            :content="content"
            :persons="persons"
            @echo="onEcho">

            <template v-slot>
                <slot ></slot>
            </template>       
                        
            <template v-slot:footer>
                <slot name="footer"></slot>
            </template>     

            <template v-slot:header="scoped">
                <slot name="header" v-bind="scoped"></slot>
            </template>
        </foo>
    </div>
</template>

<script>
import foo from './foo'
export default {
    name: 'wrapFoo',

    components: {
        foo,
    },

    props: {
        content: {
            type: String,
            default: 'Hi, this is foo!',
        },
        persons: {
            type: Array,
            default () {
                return [{
                    name: 'Tony',
                    age: 10
                }]
            }
        }
    }, 

    methods: {
        onEcho (msg) {
            this.$emit('echo', msg)
        }
    }

}
</script>

<style scoped>
.wrapFoo {
    border: 1px solid red;
}
</style>
